<template>
	<view class="boxStap">
		<!-- 进度条 -->
		<view class="boxStapTop">
			<view class="stepList">
				<view v-for="(item,index) in list" class="stepItem" :key="item.title">
					<image class="img" :src="active < index ? '/static/setpIng.png' : '/static/setpSuccess.png'">
					</image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>

	<!-- 	<view class="">
			<view class="foodList">
				<view class="foodItem" v-for="(foodItem, foodIndex) in shopCarList" :key="foodIndex">
					<image class="foodImage" :src="foodItem.foodImage" mode=""></image>
					<view class="">
						<view class="foodName">{{ foodItem.foodName }}</view>
						<view class="specifications" v-if="foodItem.specifications.length">
							规格：<template v-for="(item,index) in foodItem.specifications">{{item.name}} <template
									v-if="index != foodItem.specifications.length-1">-</template> </template>
						</view>
						<view class="foodNum">
							<view class="count">
								×{{foodItem.count}}
							</view>
							<view class="money">￥{{accMul(fenToYuan(foodItem.foodPrice), foodItem.count)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 进度详情 -->
		<view class="stepInfo">
			<view>
				<view class="">
					进展：
				</view>
				<view>
					{{stepInfo.state || ''}}
				</view>
			</view>
			<view>
				<view>处理结果：</view>
				<view>
					{{stepInfo.comments || ''}}
				</view>
			</view>
			<view>
				<view>退款路线：</view>
				<view>{{stepInfo.refundMethod  || ''}}</view>
			</view>
			<view>
				<view>申请时间：</view>
				<view>{{stepInfo.createTime || ''}}</view>
			</view>
			<view>
				<view>申请原因：</view>
				<view>{{stepInfo.refundReason || ''}}</view>
			</view>
			<view >
				<view>订单编号：</view>
				<view>{{stepInfo.orderId || ''}}</view>
			</view>
		</view>
		<!-- <view class="titleName">售后进度</view> -->
		<!-- <uni-steps :options="list1" :active="active" /> -->
		<!-- <view>
			<view class="titleText">
				进展：{{list1[1].desc}}
			</view>
			<view class="titleText">
				结果：{{msg}}
			</view>
		</view> -->
	</view>
</template>
<script>
	import {
		setStape
	} from "@/request/api.js";
	import MyMinix from '@/utils/minix/minix.js';
	export default {
		mixins: [MyMinix],
		// components: {uniSteps},
		data() {
			return {
				afterSaleId: "",
				msg: "",
				shopCarList: [{
					"foodPrice": 2000,
					"foodName": "香干炒肉",
					"foodId": "1762396230564192258",
					"count": 1,
					"storeName": "深食堂-湘式小炒",
					"shoppingCartId": "1766465608461123585",
					"foodImage": "https://customer.qiyetuancan.com/static/images/1740657178653171713/foods/6d024141-4408-4ee0-82d1-0a2be4e80c02-5aef34a397292fdb41bc5ca1a8b404b1.jpeg",
					"storeId": "1740657178653171713",
					"specifications": []
				},
				// {
				// 	"foodPrice": 2000,
				// 	"foodName": "辣子鸡",
				// 	"foodId": "1762394070510215170",
				// 	"count": 2,
				// 	"storeName": "深食堂-湘式小炒",
				// 	"shoppingCartId": "1766467315962281986",
				// 	"foodImage": "https://customer.qiyetuancan.com/static/images/1740657178653171713/foods/76259f92-2410-427e-bce7-7e4d38a18220-5aef34a397292fdb41bc5ca1a8b404b1.jpeg",
				// 	"storeId": "1740657178653171713",
				// 	"specifications": []
				// },
				{
					"foodPrice": 2500,
					"foodName": "招牌牛鸡沙拉轻食 (主食五选一)",
					"foodId": "1762421049561296898",
					"count": 1,
					"storeName": "深食堂-减脂轻食",
					"shoppingCartId": "1766467352628887554",
					"foodImage": "https://customer.qiyetuancan.com/static/images/1740657377681285121/foods/bb1bad17-5eb8-4b12-bfa9-c21b2346d87e-牛鸡沙拉小.png",
					"storeId": "1740657377681285121",
					"specifications": [{
						"name": "五常大米",
						"type": "主食"
					}]
				}],
				list1: [{
					title: '提交',
					desc: '售后申请'
				}, {
					title: '工作人员',
					desc: '审核中'
				}, {
					title: '已完成',
				}],
				active: 0,
				list: [{
						title: '申请退款',
						index: 0
					}, {
						title: '已提交',
						index: 1
					}, {
						title: '处理中',
						index: 2
					},
					{
						title: '已完成',
						index: 3
					}
				],
				stepInfo:{
					state:'',
					comments:'',
					refundMethod:'',
					createTime:'',
					refundReason:'',
					orderld:'',
				}




			}
		},
		onLoad(option) {
			let that = this
			console.log(option, 'option');
			that.afterSaleId = option.afterSaleId
			that.setOption()
		},
		methods: {
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			},
			// 获取进度信息
			async setOption() {
				let that = this
				let res = await setStape({
					method: "GET",
					data: {
						afterSaleId: that.afterSaleId
					},
				})
				that.stepInfo = res.result
				if (res.code == 200) {
					if (res.result.comments == '受理中') {
						that.active = 2
					} else {
						that.active = 3
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",

					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/ .uni-steps__row {
		flex-flow: column-reverse;
	}

	.titleText {
		color: #B7BDC6;
		font-size: 13px;
		margin-top: 30rpx;
		margin-left: 60rpx;
	}

	/deep/ .uni-steps__row-desc {
		font-size: 13px;
		line-height: 16rpx;
		margin-top: 30rpx;
	}

	.boxStap {
		width: 100vw;
		min-height: 100vh;
		background: #F6F6F6;
		box-sizing: border-box;

		.titleName {
			font-size: 40rpx;
			line-height: 150rpx;
			height: 150rpx;
			text-align: center;
		}

		&Top {
			width: 100vw;
			background: #EB5B1E;
			overflow: hidden;

			.stepList {
				@include flexs(space-between, center);
				margin: 40rpx 30rpx 50rpx;
				padding: 20rpx 40rpx;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 0.3);

				.stepItem {
					font-size: 24rpx;
					color: #fff;
					@include flexs(center, center);
					flex-direction: column;
					position: relative;

					&::after {
						position: absolute;
						content: "";
						width: 120rpx;
						height: 1rpx;
						border-bottom: 4rpx dotted #fff;
						top: 15rpx;
						right: -104rpx;
					}

					&:last-child {
						&::after {
							border: none;
						}
					}

					.img {
						display: inline-block;
						width: 36rpx;
						height: 36rpx;
						margin-bottom: 10rpx;
					}

				}
			}
		}
	}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}


	.foodList {
		// @include flexs();
		padding: 40rpx;
		background: #fff;
		margin-top: -20rpx;
		border-radius: 20rpx;

		.foodItem {
			width: 100%;
			padding-bottom: 30rpx;

			&:last-child {
				padding-bottom: 0;
			}

			@include flexs();

			.foodImage {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
			}

			>view {
				flex: 1;
				@include flexs(space-between, flex-start);
				flex-direction: column;
				height: 160rpx;
				font-size: 28rpx;
				.foodName {
				
					font-weight: bold;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.specifications {
					// font-size: 24rpx;
					margin: 12rpx 0;
					color: #aaa;
				}
				
				
				.foodNum {
					width:100%;
					@include flexs(space-between, center);
					
					.money {
						color: #FF0000;
					}
				}

				
			}
		}
	}
	.stepInfo{
		font-size: 28rpx;
		color:#232323;
		background:#fff;
		margin:-20rpx 0 30rpx;
		padding:40rpx;
		border-radius: 20rpx;
		& > view{
			@include flexs(flex-start, flex-start);
			margin-bottom:30rpx;
			&>view:last-child{
				flex:1;
			}
			&:last-child{
				margin-bottom:0;
			}
		}
	}
</style>